import { View } from '@tarojs/components';
import s from './index.module.scss'
import { useRef, useState } from 'react';
import Switch from 'components/Switch'
import RadioButton from 'components/RadioButton'
import classNames from 'classnames';

const contents = [{
  value: 'start',
  label: 'start'
}, {
  value: 'center',
  label: 'center'
},{
  value: 'end',
  label: 'end'
},{
  value: 'space-around',
  label: 'around'
},{
  value: 'space-between',
  label: 'between'
},{
  value: 'space-enevly',
  label: 'enevly'
}]
const items = ['stretch', 'start', 'center', 'end']
export default function Index() {
  const [content, setContent] = useState('start')
  const [jstItem, setJSTItem] = useState('start')
  const [active, setActive] = useState(false)
  const radio = useRef(false)
  const arr = ['one', 'two', 'three', 'four']

  const _target = classNames(s.target, {
    [s.active]: active
  })
  const disableBtn = ((state: boolean) => {
    radio.current = state
  })

  return (
    <View className={s.wrapper}>
      <div id={s.controllerTitle}>justify-content</div>
      <div id={s.controller}>
        {contents.map((item) => (
          <div 
            key={item.label} 
            id={s.btn}
            className={item.value === content ? s.active : ''}
            onClick={() => setContent(item.value)}
          >{item.label}</div>  
        ))}
      </div>

        <div id={s.playground}>
          <View
            id={s.over}
            className={_target}
          style={{ justifyContent: `${content}`, justifyItems: `${jstItem}`}}
          >
            {arr.map((item) => (
              <View className={s.out_box}>
                <View className={s.box}>{item}</View>
              </View>
            ))}
          </View>
          <View 
            id={s.under} 
            className={_target}
            style={{justifyContent: `${content}`}}
          >
          <View className={s.out_line}></View>
          <View className={s.out_line}></View>
          <View className={s.center_line}></View>
          </View>
        </div>

      <div id={s.controller}>
        {items.map((item) => (
          <div
            key={item}
            id={s.btn}
            className={item === jstItem ? s.active : ''}
            onClick={() => setJSTItem(item)}
          >{item}</div>
        ))}
      </div>
      <div id={s.controllerTitle}>justify-items</div>
      <Switch text=' 展示' className={s.margin} state={active} onClick={() => radio.current ? undefined : setActive(!active)} />
      <RadioButton text='禁用展示按钮'onChange={disableBtn}/>
    </View> 
  )
}
